<template>
  <div>
    <el-table
      :data="borrows"
      style="width: 100%"
      height="450"
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在处理..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item
              label="借书日期："
              v-if="props.row.borrowDate != '9999-12-31 00:00:00'"
            >
              <span>{{ props.row.borrowDate }}</span>
            </el-form-item>
            <el-form-item label="应还日期：">
              <span>{{ props.row.returnDate }}</span>
            </el-form-item>
            <el-form-item label="书籍名称：">
              <span>{{ props.row.bookName }}</span>
            </el-form-item>
            <el-form-item label="图书作者：">
              <span>{{ props.row.author }}</span>
            </el-form-item>
            <el-form-item label="图书状态：">
              <span>{{ props.row.status }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="borrowDate" label="借阅日期"> </el-table-column>
      <el-table-column prop="bookName" label="书籍名称"> </el-table-column>
      <el-table-column prop="author" label="图书作者"> </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" disabled v-if="scope.row.status == '已还'"
            >已还
          </el-button>
          <!-- <el-popconfirm
            title="确认归还该书籍吗？"
            @confirm="returnBook(scope.row)"
            v-if="scope.row.status != '已还' && !handleIfOverdue(scope.row)"
          > -->
          <el-button
            size="mini"
            type="primary"
            plain
            style="margin-right: 10px"
            slot="reference"
            @click="openReturn(scope.row)"
            v-if="scope.row.status != '已还' && !handleIfOverdue(scope.row)"
            >还书
          </el-button>
          <!-- </el-popconfirm> -->
          <!-- <el-popconfirm
            title="确认续借该书籍吗？"
            @confirm="continueBorrowBook(scope.$index, scope.row)"
            v-if="scope.row.status != '已还' && !handleIfOverdue(scope.row)"
          > -->
          <el-button
            size="mini"
            type="success"
            :plain="scope.row.status == '未还'"
            :disabled="scope.row.status == '续借'"
            v-if="scope.row.status != '已还' && !handleIfOverdue(scope.row)"
            @click="openContinue(scope.row)"
            slot="reference"
            >续借
          </el-button>
          <!-- </el-popconfirm> -->

          <el-button
            size="mini"
            type="warning"
            plain
            style="margin-right: 10px"
            v-if="handleIfOverdue(scope.row) && scope.row.status !== '已还'"
            @click="openOverdue(scope.row)"
            slot="reference"
            >立即还书
          </el-button>
          <el-button
            size="mini"
            type="danger"
            disabled
            plain
            v-if="handleIfOverdue(scope.row) && scope.row.status !== '已还'"
            >已逾期
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="扫码还书" :visible.sync="returnVisible" width="30%">
      <div style="display: flex; flex-direction: column; align-items: center">
        <el-image
          style="width: 100px; height: 100px; margin-bottom: 30px"
          :src="codePng"
        ></el-image>
        <el-button type="primary" @click="returnBook(currentRow)"
          >我已扫码，立即还书</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="扫码续借" :visible.sync="continueVisible" width="30%">
      <div style="display: flex; flex-direction: column; align-items: center">
        <el-image
          style="width: 100px; height: 100px; margin-bottom: 30px"
          :src="codePng"
        ></el-image>
        <el-button type="primary" @click="continueBorrowBook(currentRow)"
          >我已扫码，现在续借</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="逾期支付" :visible.sync="overdueVisible" width="30%">
      <div style="display: flex; flex-direction: column; align-items: center">
        <el-image
          style="width: 100px; height: 100px; margin-bottom: 30px"
          :src="codePng"
        ></el-image>
        <el-button type="primary" @click="returnBook(currentRow)"
          >我已支付，现在还书</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { continueBorrow, returnBook } from "@/api";
import codePng from "@/assets/code.png";
import qs from "qs";
export default {
  name: "ReaderBorrow",
  data() {
    return {
      loading: false,
      overdueVisible: false,
      returnVisible: false,
      continueVisible: false,
      codePng,
      currentRow: {},
    };
  },
  methods: {
    handleIfOverdue(item) {
      return new Date(item.returnDate) - new Date() < 0;
    },
    openReturn(row) {
      this.currentRow = row;
      this.returnVisible = true;
    },
    openOverdue(row) {
      this.currentRow = row;
      this.overdueVisible = true;
    },
    openContinue(row) {
      this.currentRow = row;
      this.continueVisible = true;
    },
    // 还书
    returnBook(row) {
      console.log("row", row);
      const isOverdue = this.handleIfOverdue(row);
      if (isOverdue) {
        this.overdueVisible = true;
      }
      let infoObj = {
      "recordId": row.recordId
      };
      returnBook(infoObj).then(
        (res) => {
          console.log(res);
          if (res.status == -1) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          } else if (res.status == 200) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.overdueVisible = false;
            this.returnVisible = false;
          }
          this.$store.dispatch(
            "initBorrows",
              {"readerId": this.readerId}
          );
        },
        (err) => {
          console.log(err.message);
        }
      );
    },
    // 续借
    continueBorrowBook(row) {
      console.log(row);
      this.loading = true;
      let infoObj = {
        "recordId": row.recordId
      };
      continueBorrow(infoObj).then((res) => {
        this.loading = false;
        console.log(res);
        if (res.status == 200) {
          this.$message({
            showClose: true,
            message: "续借成功！",
            type: "success",
          });
          this.continueVisible = false;
        }
        this.$store.dispatch(
          "initBorrows",
          { "readerId": this.readerId }
        );
      });
    },
  },
  computed: {
    ...mapState({
      borrows(state) {
        return state.Borrows.borrows;
      },
      readerId(state) {
        return state.User.readerInfo.readerId;
      },
    }),
  },
  mounted() {
    this.$store.dispatch(
      "initBorrows",
      { "readerId": this.readerId }
    );
  },
};
</script>

<style lang="less" scoped></style>
